<template>
  <el-dialog :model-value="show" title="添加时间段" @close="emit('hide')">
    <el-form :model="form" ref="formRef" :rules="rules">
      <el-config-provider :locale="locale">
        <el-form-item label="秒杀时间段名称:" prop="name">
          <el-input v-model="form.name" style="width: 50%" />
        </el-form-item>
        <el-form-item label="每日开始时间:" prop="startTime">
          <el-date-picker
            type="date"
            placeholder="选择时间"
            v-model="form.startTime"
            style="width: 50%"
          />
        </el-form-item>
        <el-form-item label="每日结束时间:" prop="endTime">
          <el-date-picker
            type="date"
            placeholder="选择时间"
            style="width: 50%"
            v-model="form.endTime"
          />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio-group class="ml-4" v-model="form.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">不启用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-config-provider>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { reactive, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { addFlashSessionApi, updateFlashSessionApi } from "./api";
const locale = zhCn;
const emit = defineEmits(["hide"]);
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  id: {
    type: Number,
    default: 0,
  },
  name: {
    type: String,
    default: "",
  },
  startTime: {
    type: String,
    default: "",
  },
  endTime: {
    type: String,
    default: "",
  },
  status: {
    type: Number,
    default: 0,
  },
});
const form = reactive<IFlashSession>({
  id: 0,
  name: "",
  status: 0,
  endTime: "",
  startTime: "",
});
watch(
  () => props.id,
  () => {
    if (props.id !== 0) {
      form.id = props.id;
      form.name = props.name;
      form.startTime = props.startTime;
      form.endTime = props.endTime;
      form.status = props.status;
    }
  }
);
// 校验规则
const rules = reactive<FormRules>({
  name: [{ required: true, trigger: "blur", message: "请输入名称" }],
  startDate: [
    {
      type: "date",
      required: true,
      message: "请选择时间",
      trigger: "change",
    },
  ],
  startTime: [
    {
      type: "date",
      required: true,
      message: "请选择时间",
      trigger: "change",
    },
  ],
});
const formRef = ref<FormInstance>();
// 取消
const cancel = () => {
  form.id = 0;
  form.startTime = "";
  form.endTime = "";
  form.name = "";
  form.status = 0;
  emit("hide", true);
};
// 添加
const addFlashSession = () => {
  ElMessageBox.confirm("确定添加活动吗？", "添加活动", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      addFlashSessionApi(form).then((res) => {
        if (res.code === 200) {
          ElMessage.success("添加成功");
          formRef.value?.resetFields();
          emit("hide", true);
        }
      });
    })
    .catch(() => {});
};
// 编辑
const editFlashSession = () => {
  console.log(form.id);

  ElMessageBox.confirm("确定要修改吗？", "修改信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      updateFlashSessionApi(form).then((res) => {
        if (res.code === 200) {
          console.log(form);
          ElMessage.success("修改成功");
          formRef.value?.resetFields();
          emit("hide", true);
        }
      });
    })
    .catch(() => {});
};
const confirm = () => {
  formRef.value?.validate((ok: boolean) => {
    if (ok) {
      if (props.id === 0) {
        addFlashSession();
      } else {
        editFlashSession();
      }
    } else {
      ElMessage.error("添加失败");
    }
  });
};
</script>

<style></style>
